<template>
  <div class="fixed_full box bg" ref="box">
    <div class="nav">
      <router-link :to="{ path: 'books'}" class="button border nav_item">全部书籍</router-link>
      <router-link :to="{ path: 'history'}" class="button border nav_item">阅读记录</router-link>
    
    </div>
    <ul class="books" v-if="history">
      <li class="book border_top" v-for="id in Object.keys(this.history)" :key="id">
        <div class="cover">
          <img v-lazy="config.apis.cover + id + '.jpg'" />
        </div>
        <div class="bookinfo">
          <router-link
            :to="{ name: 'reader', params: { id: id,name: history[id].name }}"
            class="book_name"
          >{{ history[id].name}}</router-link>
          <p class="book_brief">阅读进度：{{history[id].index}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import config from "../config.js";

export default {
  name: "history",
  data: function () {
    return {
      history: {},
      config: config,
    };
  },
  mounted: function () {
    this.history = JSON.parse(localStorage.history);
    console.log(this.history);
    console.log(Object.keys(this.history));
  },
};
</script>